<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        /*兄弟选择器不往上看*/

        /*选中div后面仅仅相邻的p*/
        div + p {
            color: red;
        }

        /*选中div后面所有的兄弟p*/
        div ~ p {
            color: red;
        }

        li ~ li {
            color: blue;
        }
    </style>
</head>
<body>
<p>pre</p>
<div>1</div>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>